<template>
    <view class="container">
        <swiper class="swiper" indicator-active-color="{{indicatorActiveColor}}" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true">
            <block wx:for="{{adList}}" wx:key="index,item">
                <swiper-item>
                    <image src="{{item.image}}" class="slide-image" @tap="goToAdvert({{index}})" />
                </swiper-item>
            </block>
        </swiper>
        <view id="devSwiId" class="devSwiId {{showSwiperTab ? 'active' : ''}}">
            <view class="pos">
                <view class="search_read_only">
                    <navigator class="classType" open-type="navigate" url="/pages/classify/classMain">
                        <view>
                            <i class="iconfont icon-weibiaoti15"></i>
                        </view>
                    </navigator>
                    <navigator class="search_content" open-type="navigate" url="/pages/classify/search">
                        <i class="iconfont icon-unie036"></i>
                        <view class="search_input">Search</view>
                    </navigator>
                </view>
            </view>
            <swiper class="mainTabSwiper" indicator-dots="{{false}}" display-multiple-items="3" current="{{mainSwCur}}">
                <block>
                    <swiper-item @tap="clickSwFun" data-id="{{item.id}}" data-choose="{{index}}" wx:for="{{mainSwList}}" wx:key="index,item">
                        <view class="swiperView {{ curMain == index ?'active' : ''}}">
                            <image src="{{item.image}}" class="nav_icon"></image>
                            <view class="nav_text">{{item.name}}</view>
                        </view>
                    </swiper-item>
                </block>
            </swiper>
        </view>
        <swiper class="mainSwiper" style="height:{{swiperHtight}}rpx;" bindchange="finishFun" indicator-dots="{{false}}" display-multiple-items="1" current="{{curMain}}">
            <block>
                <swiper-item data-id="{{item.id}}" data-choose="{{index}}" wx:for="{{mainSwList}}" wx:key="index,item">
                    <shopGridList id="" wx:if="{{!is_empty}}"></shopGridList>
                    <!--暂无数据显示-->
                    <placeholder wx:if="{{is_empty}}" message="暂无发现数据"></placeholder>
                </swiper-item>
            </block>
        </swiper>
    </view>
</template>
<script>
    import wepy from 'wepy'
    import api from '@/api/api'
    import tip from '@/utils/tip'
    import shopGridList from '../../components/shop_grid_list'
    import Bombscreen from '@/components/bomb_screen'
    import Placeholder from '../../components/common/placeholder'

    export default class Home extends wepy.page {
        config = {
            navigationBarTitleText: ' '
        }
        components = {
            shopGridList: shopGridList,
            //            bottomLoadMore: BottomLoadMore,
            placeholder: Placeholder,
            bombscreen: Bombscreen
        }
        data = {
            indicatorDots: true,
            autoplay: true,
            interval: 3000,
            duration: 1000,
            indicatorActiveColor: '#fff',
            discoverList: [],
            //是否有数据
            is_empty: false,
            //当前页面
            currentPage: 1,
            //总页数
            page_total: 0,
            //是否显示 底部loading
            showLoading: true,
            //防止重复加载
            preventRepeatReuqest: false,
            //广告列表
            adList: [],
            tps: 0,
            is_show_alert: false,
            form: {
                page: 1,
                limit: 10
            },
            mainSwCur: 0,
            mainSwList: [],
            curMain: 0,
            rectTop:0,
            showSwiperTab:false,
            swiperHtight: 550
        }

        async getChildCate(type) {
            const t = this
            const a = await api.goodsSearch({
                query: t.form
            })
            if (a.data.code == 0) {
                if (type) {
                    t.discoverList = [...t.discoverList, ...a.data.data.rows]
                } else {
                    t.discoverList = a.data.data.rows
                }
                t.form['page'] = a.data.data.page
                t.page_total = Math.ceil(a.data.data.total / t.form['limit'])
                if (t.discoverList.length > 0) {
                    t.swiperHtight = Math.ceil(t.discoverList.length/2) * 470 + 10;
                    t.is_empty = false
                } else {
                    t.swiperHtight = 550;
                    t.is_empty = true
                }
                t.$invoke('shopGridList', 'eachItem', t.discoverList)
                t.$apply()
            } else {
                tip.error(a.data.msg)
            }
        }

        async getAdList() {
            const json = await api.artGetByType(
                {
                    query: {
                        type: 'BANNER'
                    }
                },
                'BANNER'
            )
            if (json.data.code == 0) {
                this.adList = json.data.data
                this.$apply()
            } else {
            }
        }

        onShow() {
            let that = this
            that.discoverList = []
            let refreshToken = wepy.getStorageSync('refreshToken')
            if (!refreshToken) {
                wepy.navigateTo({
                    url: '/pages/personalCenter/login'
                })
            } else {
                that.form['page'] = 1
                that.curMain = 0
                that.mainSwCur = 0
                that.getAdList()
                that.csLoad()
                that.methods.getThisTop(that)
                that.$apply()
            }
        }
        onPageScroll (e) { // 获取滚动条当前位置
            const t = this;
            if (e.scrollTop > t.rectTop) {
                t.showSwiperTab = true;
            }else{
                t.showSwiperTab = false;
            }
            t.$apply();
        }

        computed = {}
        methods = {
            clickSwFun(e) {
                const t = this
                let l = t.mainSwList.length - 1;
                t.curMain = parseInt(e.currentTarget.dataset.choose)
                if (t.curMain <= 1) {
                    t.mainSwCur = 0;
                } else if (1 < t.curMain && t.curMain < l) {
                    t.mainSwCur = t.curMain - 1;
                }

            },
            goToAdvert(i) {
                wepy.navigateTo({
                    url: '/pages/tj/introIndex?index='+i
                })
            },
            getThisTop(t){
                wx.createSelectorQuery().select('#devSwiId').boundingClientRect(function(rect){
                    t.rectTop = rect.top;
                }).exec()
            },
            finishFun(e){
                const t = this;
                let l = t.mainSwList.length - 1;
                t.curMain = e.detail.current;
                if (t.curMain <= 1) {
                    t.mainSwCur = 0;
                } else if (1 < t.curMain && t.curMain < l) {
                    t.mainSwCur = t.curMain - 1;
                }
                t.form['page'] = 1;
                t.form['params["categoryId"]'] = t.mainSwList[t.curMain].id;
                t.form['sortField'] = 'createTime'
                t.form['dir'] = 'DESC'
                t.getChildCate()
                t.$apply();
            }
        }
        events = {}

        /**
         * 获取首页分类
         * @returns {Promise.<void>}
         */
        async csLoad() {
            const t = this
            const b = await api.goodsCateSearch({}, 'MAIN')
            if (b.data.code == '0') {
                t.mainSwList = b.data.data
                t.form['params["categoryId"]'] = t.mainSwList[0].id
                t.form['sortField'] = 'createTime'
                t.form['dir'] = 'DESC'
                t.getChildCate()
                t.$apply()
            }
        }

        //加载更多
        onReachBottom() {
            let that = this
            that.showLoading = true
            if (that.page_total > that.form['page']) {
                that.form['page']++
                that.getChildCate(1)
            } else {
                that.showLoading = false
            }
        }
    }
</script>
<style lang="less">
.container {
    .swiper {
        height: 348rpx;
    }

    .slide-image {
        width: 100%;
        height: 100%;
    }
    .search_read_only {
        width: 700rpx;
    }
    .pos {
        margin: 10rpx 0;
        .search_content {
            background: #f5f5f9;
            border: 1px solid #efefee;
            width: 560rpx;
            border-radius: 10rpx;
            position: relative;
            .icon-unie036 {
                color: #ccc;
                position: absolute;
                top: 0rpx;
                left: 20rpx;
                z-index: 99999;
                font-size: 30rpx;
            }
            .search_input {
                color: #ccc;
                padding-left: 40rpx;
            }
        }

        .classType {
            display: block;
            text-align: center;
            width: 60rpx;
        }
        .doc {
            font-size: 16rpx;
            display: block;
        }
    }
    .recommend-title {
        padding: 40rpx 0;
        text-align: center;
        color: #333;
    }
    .mainTabSwiper {
        border-top: 1px solid #d7d7d7;
        height: 90rpx;
        text-align: center;
        line-height: 90rpx;
        .swiperView {
            height: 88rpx;
        }
        .nav_icon {
            height: 50rpx;
            width: 50rpx;
            display: inline-block;
            vertical-align: middle;
            margin-right: 20rpx;
        }
        .nav_text {
            font-size: 24rpx;
            display: inline-block;
            vertical-align: middle;
        }
        .active {
            border-bottom: 2rpx solid #ffb025;
        }
    }
    .devSwiId.active{
        position: fixed;
        top:0;
        left: 0;
        z-index: 999;
        width: 100%;
        background-color: #fff;
    }
    .mainSwiper .shop_item{
        background-color: #fff;
    }
}
</style>
